<script src="assets/plugins/masonry/js/masonry-docs.min.js" type="text/javascript"></script>

<div>
    <a href="#/wechat/material/create" class="btn btn-primary">创建图文信息</a>
</div>


<div id="materialContainer" style="margin-top: 10px">
    <div class="material" ng-repeat="material in materials" after-repeat-dom-create="afterMaterialInsert()"
         style="border: 1px solid #C9C9CC;width:295px;margin-bottom: 20px;float: left">
        <div ng-if="material.newList.length==1">
            <div style="padding: 5px 14px">
                <div style="line-height: 28px;font-size: 16px;">{{material.newList[0].title}}</div>
                <div style="font-weight: 400;color: #666;">{{material.newList[0].createdTime|time:'MM-dd hh:mm'}}</div>
                <div background-image="{{material.newList[0].coverImg}}" style=" height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;"></div>
                <div style="font-weight: 400;color: #666; padding: 5px 0 10px;">{{material.newList[0].digest}}</div>
            </div>
        </div>
        <div ng-if="material.newList.length!=1" ng-repeat="new in material.newList" style="width:295px;">
            <div ng-if="$index==0" style="padding: 5px 14px 10px 14px;">
                <div style="font-weight: 400;color: #666;">{{new.createdTime|time:'MM-dd hh:mm'}}</div>
                <div background-image="{{new.coverImg}}" style="height: 160px;width: 100%;background-size:cover;overflow: hidden;background-repeat: no-repeat;background-position:center center;position: relative">
                    <div style="position: absolute;bottom: 0px;height: 30px;width:100%;background-color:rgba(39, 39, 38, 0.71);
                line-height: 30px;padding-left: 10px;padding-right: 5px;overflow: hidden;text-overflow: ellipsis;color: #ffffff;text-align: left">
                        <span>{{new.title}}</span>
                    </div>
                </div>
            </div>
            <div ng-if="$index!=0" style="height: 120px;border-top: 1px solid #C9C9CC">
                <div style="float: left;height: 78px;width: 180px;margin: 20px 10px 0px 13px;line-height: 39px;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;">
                    <span>{{new.title}}</span>
                </div>

                <div style="float: left;height: 78px;width: 78px;margin-top: 20px;line-height: 78px;text-align: center;background-color: buttonface">
                    <img ng-src="{{new.coverImg}}" width="100%" height="100%">
                </div>
            </div>
        </div>
        <div style="height: 43px;line-height: 43px;border-top: 1px solid #C9C9CC;background-color: #DCDCDC;text-align: center;font-size: 20px;color: #545353">
            <div style="float: left;width: 50%;height: 100%;border-right: 1px solid #C9C9CC">
                <i class="fa fa-pencil" data-placement="top" onMouseOver="$(this).tooltip('show')" title="编辑" style="cursor: pointer"
                   aria-hidden="true" ng-click="edit(material)"></i>
            </div>
            <div style="float: left;width: 50%;height: 100%">
                <i class="fa fa-trash" aria-hidden="true" data-placement="top" onMouseOver="$(this).tooltip('show')" title="删除" style="cursor: pointer"
                   ng-click="delete(material,$index)"></i>
            </div>
        </div>
    </div>
</div>